<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Website Vertical Scrolling with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Website Vertical Scrolling with jQuery" />
        <meta name="keywords" content="jquery, vertical, scrolling, scroll, smooth"/>
        <link rel="stylesheet" href="css/style_vertical.css" type="text/css" media="screen"/>
    </head>
    <style>
        a{
            color:#fff;
            text-decoration:none;
        }
        a:hover{
            text-decoration:underline;
        }
        span.reference{
            position:fixed;
            left:10px;
            bottom:10px;
            font-size:13px;
            font-weight:bold;
        }
        span.reference a{
            color:#fff;
            text-shadow:1px 1px 1px #000;
            padding-right:20px;
        }
        span.reference a:hover{
            color:#ddd;
            text-decoration:none;
        }

    </style>
    <body>

        <div class="section black" id="section1">
            <ul class="nav">
                <li>Home</li>
                <li><a href="#section2">About</a></li>
                <li><a href="#section3">Contact</a></li>
			<li><a href="#section4">Blog</a></li>
			<li><a href="#section5">Portfolio</a></li>
            </ul>
            <h2>Section 1</h2>
            <p>
                MY Spectre around me night and day
                Like a wild beast guards my way;
                My Emanation far within
                Weeps incessantly for my sin.
            </p>
        </div>

        <div class="section white" id="section2">
<ul class="nav">
                <li><a href="#section1">Home</a></li>
                <li>About</li>
                <li><a href="#section3">Contact</a></li>
			<li><a href="#section4">Blog</a></li>
			<li><a href="#section5">Portfolio</a></li>

            </ul>
            <h2>Section 2</h2>
            <p>
                ‘A fathomless and boundless deep,
                There we wander, there we weep;
                On the hungry craving wind
                My Spectre follows thee behind.

            </p>
            
        </div>
        <div class="section black" id="section3">

            <ul class="nav">
                <li><a href="#section1">Home</a></li>
                <li><a href="#section2">About</a></li>
                <li>Contact</li>
			<li><a href="#section4">Blog</a></li>
			<li><a href="#section5">Portfolio</a></li>

            </ul>
            <h2>Section 3</h2>
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>


        <div class="section white" id="section4">
<ul class="nav">
                <li><a href="#section1">Home</a></li>
                <li><a href="#section2">About</a></li>
                <li><a href="#section3">Contact</a></li>
			<li>Blog</li>
			<li><a href="#section5">Portfolio</a></li>

            </ul>
            <h2>Section 2</h2>
            <p>
                ‘A fathomless and boundless deep,
                There we wander, there we weep;
                On the hungry craving wind
                My Spectre follows thee behind.

            </p>
            
        </div>
        <div class="section black" id="section5">

            <ul class="nav">
                <li><a href="#section1">Home</a></li>
                <li><a href="#section2">About</a></li>
                <li><a href="#section3">Contact</a></li>
			<li><a href="#section4">Blog</a></li>
			<li>Portfolio</li>

            </ul>
            <h2>Section 3</h2>
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
        </div>

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1500,'easeInOutExpo');
                    /*
                    if you don't want to use the easing effects:
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                    event.preventDefault();
                });
            });
        </script>
    </body>
</html>